<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>事件取消</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div{
        	padding: 40px;
        }
        .div1{
        	background-color: red;
        }
        .div2{
        	background-color: blue;
        }
        .div3{
        	background-color: yellow;
        }
    </style>
</head>
<body>
<div class="div div1" id="j_div1">
	<div class="div div2" id="j_div2">
		<div class="div div3" id="j_div3"></div>
	</div>
</div>


<script type="text/javascript">
/*
 *
 * */
    window.onload=function(){
       
        var oDiv1 = document.getElementById("j_div1");
        var oDiv2 = document.getElementById("j_div2");
        var oDiv3 = document.getElementById("j_div3");
		 	 
		 	function fn1(){
		 		alert(this.id);
		 	}
		 	function fn2(ev){
		 		var ev = ev || event;
		 		//ev.cancelBubble = true;
		 		ev.stopPropagation();
		 		alert(this.id);
		 	}
		 	function fn3(){
		 		alert(1+this);
		 	}
		 	function fn4(){
		 		alert(2);
		 	}
		 	
			//oDiv1.onclick = fn1;
			//oDiv1.onclick = null;//普通取消
			
			oDiv1.addEventListener('click',fn1,false);
			oDiv2.addEventListener('click',fn1,false);
			oDiv3.addEventListener('click',fn1,false);
		  	/*取消掉attachEvent、addEventListener绑定的事件：
		  	 *ie: obj.detachEvent(事件名称，事件函数)
		  	 *标准： obj.removeEventListener(事件名称,事件函数,是否捕获)
		  	 * */
		  	
		  	oDiv2.removeEventListener('click',fn1,false);
		  	
		}
</script>
</body>

</html>
